<template>
	<div style="height: 100%;">
		<el-table :data="tableData" :stripe="true" border highlight-current-row @selection-change="selectionChange">
			<el-table-column type="selection" width="55" align="center"></el-table-column>
	        <el-table-column type="index" label="序号" width="70" align="center">
	        	<template slot-scope="scope">
	        		<span>{{scope.$index + (currentPage[0] - 1) * pageSize[0] + 1}}</span>
	        	</template>
	        </el-table-column>
	        <el-table-column property="name" label="操作员" align="center" show-overflow-tooltip></el-table-column>
	        <el-table-column property="bills" label="操作单据" align="center" show-overflow-tooltip></el-table-column>
	        <el-table-column property="module" label="操作模块" align="center" show-overflow-tooltip></el-table-column>
	        <el-table-column property="category" label="操作类别" align="center" show-overflow-tooltip></el-table-column>
	        <el-table-column property="content" label="操作内容" align="center" show-overflow-tooltip></el-table-column>
	        <el-table-column property="browser" label="浏览器" align="center" show-overflow-tooltip></el-table-column>
	        <el-table-column property="host" label="机器地址" align="center" show-overflow-tooltip></el-table-column>
	        <el-table-column property="os" label="客户端" align="center" show-overflow-tooltip></el-table-column>
	        <el-table-column property="createTime" label="操作时间" align="center" show-overflow-tooltip></el-table-column>
		</el-table>
		<!-- 分页 -->
		<v-page v-if="tableData.length > 0"/>
	</div>
</template>
<script>
import Page from './page'
export default {
	components: {
		'v-page': Page
	},
	data() {
		return {
			currentPage: this.$store.state.netLogStore.currentPage,
			pageSize: this.$store.state.netLogStore.pageSize,
			status: this.$store.state.netLogStore.status,
			tableData: this.$store.state.netLogStore.tableData
		}
	},
	watch: {
		status(newVal) {
			if(newVal[0] == 1) {
				let searchResult = this.$store.state.netLogStore.searchResult;
				this.$store.commit('netLogStore/updateTableData', searchResult.slice(0, this.pageSize));
			}
		}
	},
	methods: {
		selectionChange(arr) {
			this.$store.commit('netLogStore/multipleSelection', arr);
		}
	},
	mounted() {
		this.$store.commit('netLogStore/updateStatus', 0);
		this.$store.commit('netLogStore/updateCurrentPage', 1);
		this.$store.dispatch('netLogStore/getTableData');
	}
}
</script>